<template>
  <div class="box login-box">
    <h3 class="head-font">登录</h3>
    <van-cell-group :border="false">
      <van-field
        v-model="username"
        :border="false"
        clearable
        @blur="onBlur"
        placeholder="请输入账号"
      />
      <van-field
        :type="pswType"
        :border="false"
        v-model="password"
        :right-icon="isShow==true?eye:closeEye"
        placeholder="请输入密码"
        @blur="onBlur"
        @click-right-icon="rightIconChange"
      />
    </van-cell-group>
    <van-button color="#4B66C6" block :disabled="disabled" to="/index">登录</van-button>
  </div>
</template>

<script>
import eye from '@/assets/images/icon-eyes.png'
import closeEye from '@/assets/images/icon-close-eyes.png'
export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: '',
      disabled: true,
      isShow: true, // 是否显示密码
      pswType: 'text', // 密码输入框显示方式 text password
      eye: eye,
      closeEye: closeEye
    }
  },
  mounted () {
  },
  methods: {
    rightIconChange () { // 右侧眼睛点击事件
      if (this.isShow === true) {
        this.pswType = 'password'
        this.isShow = false
      } else {
        this.pswType = 'text'
        this.isShow = true
      }
    },
    onBlur () { // 失去焦点的时候 判断input不为空，就显示按钮
      if (this.username.length > 0 && this.password.length > 0) {
        this.disabled = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  background-color: #fff;
  >h3{
    font-size:48/7.5vw;
    padding:110/7.5vw 0 70/7.5vw
  }

}
</style>
<style lang="less">
  .login-box{
    .van-button--normal{
      font-size: 38/7.5vw;
      font-family: PingFangSC-Medium;
    }
    .van-button--block{
      margin-top:110/7.5vw;
      box-shadow:0px 8px 20px 0px rgba(75,102,198,0.4);
    }
    .van-cell{
      padding:0;
      line-height: 100/7.5vw;
      font-size:32/7.5vw;
      border-bottom: 1px solid #F7F7F7;
      /* 改变input光标颜色 */
      .van-field__control{
        caret-color:#4B66C6;
        font-family: PingFangSC;
      }
      .van-field__clear.van-icon.van-icon-clear, .van-field__right-icon .van-icon{
        font-size:46/7.5vw;
      }
    }
  }
</style>
